<template>
  <div class="divBox" style="padding:10px 0">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix" style="margin-top:10px">
        <el-button size="small" type="primary" @click="updata"
          >添加商品</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        style="width: 100%"
        size="mini"
      >
        <el-table-column
          prop="productId"
          label="商品ID"
          width="100"
          align="center"
        />
        <el-table-column
          prop="cover"
          label="商品图"
          width="60"
          align="center"
        >
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="商品名"
          min-width="200"
          align="center"
        />
        <el-table-column
          prop="lowPrice"
          label="商品售价"
          min-width="50"
          align="center"
        />
        <el-table-column
          prop="updateTime"
          label="添加时间"
          min-width="50"
          align="center"
        />
        <el-table-column label="商品状态" min-width="50" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.on"
              :active-value="true"
              :inactive-value="false"
              active-text="上架"
              inactive-text="下架"
              @change="onchangeIsShow(scope.row)"
            />
            <!-- <span>{{ scope.row.on ? "上架" : "下架" }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="50" align="center">
          <template slot-scope="scope">
            <div style="display: inline-block">
              <el-button
                @click="tuiliu(scope.row, scope.$index)"
                type="text"
                size="mini"
                :disabled="show"
                v-if="scope.row.msg == 60"
                >开始推送</el-button
              >
              <span style="color: #1890ff;margin-right:10px" v-else
                >推送中 {{ scope.row.msg }}</span
              >
            </div>
            <el-button type="text" size="mini" :disabled="show" @click="shelf(scope.row)" v-if="scope.row.on"
              >下架</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="deleteshopping(scope.row)"
              v-if="!scope.row.on"
              :disabled="show"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="modals"
      title="商品列表"
      footerHide
      class="paymentFooter"
      scrollable
      width="900"
      @on-cancel="cancel"
      style="height: 800px"
    >
      <!-- <GoodList ref="Goodslist" @getStoreItem="getStoreItem" :handleNum="handleNum" :specifications='true'/>  -->
      <div style="margin: 0 0 20px">
        <el-radio-group
              v-model="typequ"
              type="button"
              @change="seachList"
              class="xianshang"
            >
              <el-radio-button label="0">商品</el-radio-button>
              <el-radio-button label="2">卡项</el-radio-button>
            </el-radio-group>
      </div>

      <el-table
        v-loading="Loading"
        :data="querylist"
        style="width: 100%"
        size="mini"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="productId" label="ID" min-width="50" />
        <el-table-column label="商品图" align="center">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.cover"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center" />
        <el-table-column prop="price" label="商品原价" align="center" />
        <el-table-column prop="lowPrice" label="商品售价" align="center" />
        <el-table-column prop="type" label="类型" align="center" v-if="typequ=='0'" />
        <el-table-column prop="cardType" label="属性" align="center" v-if="typequ=='2'" />
        <el-table-column prop="attrValues" label="规格" align="center" />
      </el-table>
      <div class="block mb20">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableFrom1.limit"
          :current-page="tableFrom1.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          @size-change="handleSizeChange1"
          @current-change="pageChange1"
        />
      </div>
      <div class="col-md-6" style="text-align: right; margin-top: 10px">
        <el-button type="primary" @click="dingti"> 提交 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getmeizhishopping,
  getmeizhishoppingtui,
  getmeizhishoppingadd,
  getmeizhishoppingdelete,
  getmeizhishoppingquery,
  getmeizhishoppingshelf,
} from "@/api/marketing.js";
import GoodList from "@/components/goodList";
import { string } from 'jszip/lib/support';
export default {
  components: { GoodList },
  props:{
    liveId:{
      type:String,
      default:''
    }

  },
  data() {
    return {
      id: "",
      listLoading: false,
      Loading: false,
      list: [],
      querylist: [], //规格商品列表
      zhonglist: [], //选中商品
      tableFrom: {
        page: 1,
        limit: 20,
      },
      tableFrom1: {
        page: 1,
        limit: 20,
      },
      total: 0,
      total1: 0,
      show: false, //推送商品
      timer: null,
      modals: false,
      handleNum: "many",
      typequ:'0',
    };
  },
  created() {
    if (window.location.search.split("=")[1]) {
      this.id = window.location.search.split("=")[1];
      this.getlist();
    }
  },
  watch:{
    liveId(val){
      if(val){
        console.log("852147",val)
        this.getlist()
      }
    }
  },
  methods: {
    getlist() {
      this.listLoading = true;
      let parmas = {
        liveId: this.liveId,
        current: this.tableFrom.page,
        size: this.tableFrom.limit,
      };
      getmeizhishopping(parmas)
        .then((res) => {
          console.log(res);
          this.listLoading = false;
          this.list = res.records;
          this.total = res.total;
          for (let i = 0; i < this.list.length; i++) {
            this.$set(this.list[i], "msg", 60);
          }
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    seachList(){
      this.current=1
      this.getlistgui()
    },
    //查询商品规格列表
    getlistgui() {
      this.Loading = true;
      let parmas = {
        current: this.tableFrom1.page,
        size: this.tableFrom1.limit,
        type:this.typequ=='0' ? null : 4
      };
      getmeizhishoppingquery(parmas)
        .then((res) => {
          console.log(res);
          this.Loading = false;
          this.querylist = res.records;
          this.total1 = res.total;
        })
        .catch((res) => {
          this.Loading = false;
        });
    },
    //导入商品
    dingti() {
      this.Loading = true;
      console.log(this.zhonglist);
      let code = [];
      this.zhonglist.map((item) => {
        code.push(item.id);
      });
      let parmas = {
        liveId: this.liveId,
        skuIds: code,
      };
      getmeizhishoppingadd(parmas)
        .then((res) => {
          this.Loading = false;
          this.modals = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 2000,
          });
          this.getlist();
        })
        .catch((res) => {
          this.Loading = false;
        });
    },
    onchangeIsShow(row){
      console.log(row.on)
      if(row.on){
        this.listLoading=true
      getmeizhishoppingtui(row.id).then(res=>{
        this.listLoading=false
        this.$message({
              message: "操作成功",
              type: "success",
              duration: 2000,
            });
        this.getlist();
        this.$emit('getaddshopp',row)
        // this.$emit('getaddshopp')
      }).catch(error=>{
        this.listLoading=false
      })
      }else{
        this.shelf(row)
      }
    },
    //撤回商品
    shelf(row) {
      this.listLoading = true;
      getmeizhishoppingshelf(row.id)
        .then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 2000,
          });
          this.$emit('getdeleteshopp')
          this.listLoading = false;
          this.getlist();
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    //删除商品
    deleteshopping(row) {
      this.$confirm(
        "删除商品后，在列表中将查找不到此商品，且此操作不可逆, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.listLoading = true;
        getmeizhishoppingdelete(row.id)
          .then((res) => {
            this.listLoading = false;
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 2000,
            });
            this.getlist();
          })
          .catch((res) => {
            this.listLoading = false;
          });
      });
    },
    //直播间导入商品
    handleSelectionChange(val) {
      console.log(val);
      this.zhonglist = val;
    },
    //添加上商品
    updata() {
      this.modals = true;
      this.getlistgui();
    },
    //赠品
    cancel() {
      this.modals = false;
      this.tableFrom1 = {
        page: 1,
        limit: 20,
      };
    },
    //商品推流
    tuiliu(row, index) {
      this.listLoading=true
      getmeizhishoppingtui(row.id)
        .then((res) => {
          this.$emit('getaddshopp',row)
          this.getlist()
          this.listLoading=false
          this.timer = setInterval(() => {
            this.show = true;
            row.msg--;
            this.$set(this.list[index], "msg", row.msg);
            if (row.msg == 0) {
              this.show = false;
              clearInterval(this.timer);
              this.$set(this.list[index], "msg", 60);
            }
          }, 1000);
        })
        .catch((res) => {
          this.listLoading=false
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getlist();
    },
    //商品规格
    pageChange1(page) {
      this.tableFrom1.page = page;
      this.getlistgui();
    },
    handleSizeChange1(val) {
      this.tableFrom1.limit = val;
      this.getlistgui();
    },
  },
};
</script>
<style lang="scss" >
.divBox{
  .el-switch__label--right{
    position: absolute;
    right: 10px;
  }
  .el-switch__label--left{
      position: absolute;
      left: 10px;
  }

}
</style>
